<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='../../bower/paper-checkbox/paper-checkbox.html'>
<link rel='import' href='../../bower/paper-input/paper-input-decorator.html'>
<link rel='import' href='../../bower/core-icons/core-icons.html'>
<link rel='import' href='avatar.html'>
<link rel='import' href='description.html'>
<link rel='import' href='faq-link.html'>
<link rel='import' href='link.html'>
<link rel='import' href='name-for-network.html'>
<link rel='import' href='network-in-settings.html'>

<polymer-element name='uproxy-settings'>
  <template>
    <style is='custom-style'>
    :host {
      position: absolute;
      display: inline-block;
      box-sizing: border-box;
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
      min-width: 300px;
      height: 100%;
      background-color: #ffffff;
      font-size: 14px;
    }
    .clickable {
      cursor: pointer;
    }
    .userInfo {
      background-color: #12A391;  /* dark green */
      color: white;
      padding: 28px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
    }
    .userInfo .subdued {
      opacity: 0.54;
      font-size: 13px;
      line-height: normal;
    }
    .currentAccountInfo {
      margin-top: 18px;
    }
    #pictures {
      height: 64px;
    }
    uproxy-avatar {
      width: 40px;
      height: 40px;
    }
    #pictures>:nth-child(2) {
      flex: 1;
    }
    #pictures>:nth-child(2) uproxy-avatar {
      width: 64px;
      height: 64px;
    }
    #pictures>:not(:nth-child(2)) {
      padding-left: 3px;
      padding-right: 3px;
    }
    .settingsContent {
      padding: 24px 28px;
      color: rgb(112, 112, 112);
      background-color: #fff;
    }
    .settingsContent core-icon {
      height: 20px !important;
      width: 20px !important;
    }
    .label {
      text-indent: 5px;
      display: inline-block;
    }
    uproxy-link {
      display: block;
      padding: 10px 0px;
    }
    .smalltext {
      font-size: 12px;
      padding: 0;
      color: rgb(180, 180, 180);
    }
    paper-input-decorator {
      padding: 0;
      margin-bottom: 5px;
    }
    paper-checkbox::shadow #checkboxContainer {
      margin-left: 1px;
      width: 16px;
      height: 16px;
    }
    paper-checkbox::shadow #checkbox:not(.checked) {
      border: solid 2px rgb(112,112,112);
    }
    paper-checkbox::shadow #checkmark {
      position: fixed;
      margin-top: 1px;
      margin-left: 1px;
    }
    paper-checkbox::shadow #checkboxLabel {
      padding: 0px 8px;
    }
    #metricsCheckbox core-icon[icon='help']{
      height: 15px !important;
      color: grey;
      opacity: 0.6;
      margin-bottom: 2px;
      margin-right: 0px;
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
    }
    #metricsCheckbox core-icon[icon='help']:hover {
      opacity: 1;
    }
    #metricsCheckbox paper-checkbox, .faq-icon {
      display: table-cell;
    }
    #settingsLinks .label {
      margin: 0px 5px;
    }
    hr {
      border: 0;
      margin: 20px -28px;
      border-bottom: solid 1px;
      border-color: rgb(238, 238, 238);
    }
    #accountChooser div {
      margin-top: 30px;
    }
    #languageLink paper-dropdown-menu {
      border-bottom: 0px;
      font-size: 14px;
      margin: 0;
      padding-left: 7px;
      padding-bottom: 0px;
    }
    #languageLink core-icon {
      height: 18px !important;
      width: 18px !important;
    }
    #languageLink paper-item {
      font-size: 15px;
    }
    #languageLink paper-item::shadow .button-content {
      padding: 0;
    }
    </style>
    <uproxy-state id="state"></uproxy-state>

    <div vertical layout>
      <div class='userInfo'>
        <div id='pictures' horizontal layout hidden?='{{ model.onlineNetworks.length === 1 && !model.onlineNetworks[0].imageData }}'>
          <template repeat='{{network in model.onlineNetworks}}'>
            <!-- this currently breaks with more than 4 logged-in networks -->
            <div>
              <uproxy-avatar src='{{ network.imageData }}' network='{{ network.name }}' showIcon='{{ model.onlineNetworks.length > 1 }}'></uproxy-avatar>
            </div>
          </template>
        </div>

        <div class='clickable currentAccountInfo' on-tap='{{ toggleAccountChooser }}'>
          <div horizontal center layout>
            <span class='subdued' hidden?='{{model.onlineNetworks.length !== 0}}' flex>{{ "NOT_CONNECTED_LOGIN_TO_START" | $$(model.globalSettings.language) }}</span>
            <span class='subdued' hidden?='{{model.onlineNetworks.length !== 1}}' flex>{{ "CONNECTED_WITH" | $$(model.globalSettings.language, {network: connectedNetwork}) }}</span>
            <span class='subdued' hidden?='{{model.onlineNetworks.length < 2}}' flex>{{ "CONNECTED_WITH_NUMBER" | $$(model.globalSettings.language, {number: model.onlineNetworks.length}) }}</span>
            <span hidden?='{{ model.onlineNetworks.length === 1 }}'>
              <core-icon icon='arrow-drop-down' hidden?='{{ accountChooserOpen }}'></core-icon>
              <core-icon icon='arrow-drop-up' hidden?='{{ !accountChooserOpen }}'></core-icon>
            </span>
            </span>
          </div>

          <div horizontal layout hidden?='{{ model.onlineNetworks.length !== 1 }}'>
            <span flex><uproxy-name-for-network network='{{ model.onlineNetworks[0] }}'></uproxy-name-for-network></span>
            <core-icon icon='arrow-drop-down' hidden?='{{ accountChooserOpen }}'></core-icon>
            <core-icon icon='arrow-drop-up' hidden?='{{ !accountChooserOpen }}'></core-icon>
          </div>
        </div>
      </div>

      <div id='mainSettings' class='settingsContent' hidden?='{{ accountChooserOpen }}'>
        <div class='smalltext'>
          {{ "DEVICE_DESCRIPTION" | $$(model.globalSettings.language) }}
          <uproxy-description id='description'></uproxy-description>
        </div>

        <hr>

        <uproxy-link on-tap='{{ openFeedbackForm }}' role='button'>
          <core-icon icon="announcement"></core-icon>
          <!-- try taking out these .label spans and see what happens. -->
          <span class='label'>{{ "SUBMIT_FEEDBACK" | $$(model.globalSettings.language) }}</span>
        </uproxy-link>

        <uproxy-faq-link role='button'>
          <core-icon icon="help"></core-icon>
          <span class='label'>{{ "GET_HELP" | $$(model.globalSettings.language) }}</span>
        </uproxy-faq-link>
        <div id='languageLink'>
          <core-icon icon='language'></core-icon>
          <paper-dropdown-menu label='{{ "LANGUAGE" | $$ }}'>
            <paper-dropdown class="dropdown" valign="bottom">
                <core-menu class="menu" on-core-select='{{ updateLanguage }}'>
                    <template repeat='{{ l in languages }}'>
                      <paper-item languageCode='{{ l.languageCode }}'>
                        <bdi>{{ l.language }}</bdi>
                      </paper-item>
                    </template>
                </core-menu>
            </paper-dropdown>
          </paper-dropdown-menu>
        </div> <!-- end of #languageLink -->

        <uproxy-link on-tap='{{ openAdvancedSettingsForm }}' role='button'>
          <core-icon icon="settings"></core-icon>
          <span class='label'>{{ "ADVANCED_SETTINGS" | $$(model.globalSettings.language) }}</span>
        </uproxy-link>

        <div id='metricsCheckbox'>
          <paper-checkbox label='{{ "STATS_ENABLED_TITLE" | $$(model.globalSettings.language) }}' checked='{{ model.globalSettings.statsReportingEnabled }}' on-change='{{updateStatsReportingEnabled}}'></paper-checkbox>
          <uproxy-faq-link class='faq-icon' anchor='doesUproxyLogData'>
            <core-icon icon='help'></core-icon>
          </uproxy-faq-link>
        </div>

        <hr>

        <uproxy-link on-tap='{{ restart }}' hidden?='{{ !showRestartButton }}' role='button'>
          <core-icon icon='refresh'></core-icon>
          <span class='label'>{{ "RESTART" | $$(model.globalSettings.language) }}</span>
        </uproxy-link>

        <uproxy-link on-tap='{{ logOut }}' hidden?="{{ !showLogoutButton }}" role='button'>
          <core-icon icon="uproxy-icons:logout"></core-icon>
          <span class='label'>{{ "LOGOUT" | $$(model.globalSettings.language) }}</span>
        </uproxy-link>
      </div>

      <div id='accountChooser' class='settingsContent' hidden?='{{ !accountChooserOpen }}'>
        <span class='smalltext'>{{ "CONNECTED_ACCOUNTS" | $$(model.globalSettings.language) }}</span>
        <template repeat='{{ name in model.networkNames }}'>
          <div hidden?="{{name=='Cloud'}}">
            <uproxy-network-in-settings name='{{ name }}'></uproxy-network-in-settings>
          </div>
        </template>
      </div>
    </div>

  </template>

  <script src='settings.js'></script>

</polymer-element>
